<template>
	<Header></Header>
	<div class='detail-title'>
		<div class='detail-main'>
			<div class='detail-map'>
				<el-breadcrumb :separator-icon="ArrowRight">
					<el-breadcrumb-item>课程</el-breadcrumb-item>
					<el-breadcrumb-item>免费课</el-breadcrumb-item>
					<el-breadcrumb-item>{{ detail.courseName }}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class='detail-name'>{{ detail.courseName }}</div>
			<div class='detail-content'>难度 入门</div>
		</div>
	</div>
	<div class='detail-container'>
		<div class='tab-name'>
			<ul>
				<li @click='isActive = 1' :class='isActive == 1 ? "active" : ""'>章节</li>
				<li @click='isActive = 2' :class='isActive == 2 ? "active" : ""'>下载笔记代码</li>
			</ul>
		</div>
		<div class='tab-chapters' v-if='isActive == 1'>
			<div class='tab-txt'>
				<div class='txt-content'>
					简介：全面系统地介绍国有资产管理的基本理论、基本知识、基本方法和我国现行国有资产管理方面的政策与制度，努力反映我国国有资产管理体制改革的最新成果和国内外国有资产。
				</div>
				<div class='txt-btn'>
					<div class='payment'>立即购买</div>

					<div class='add-cart' @click="addCart()">
						加入购物车
					</div>

				</div>
			</div>
			<div class='detail-list'>
				<div class='item' v-for="item in bizCourseChapters" :key="item.id">

					<div class='item-title'>
						<div class='item-name'>{{ item.chapterName }} {{ item.description }}</div>
						<div class='item-key'>从零开始完整的讲解了力推且备受万千开发者喜爱的语言</div>
					</div>

					<ul>
						<li v-for="k in item.children" :key='k.id'>
							<div class='course'>
								<img src="@/assets/img/detail-video.png" />
								<div>视频：{{ k.chapterName }}（10:44)</div>
							</div>
							<div class='course-video' @click="goPlay(item, k.id)">开始学习</div>
						</li>

					</ul>
				</div>

			</div>
		</div>
		<div class='tab-main' v-if='isActive == 2'>
			<ul>
				<li v-for="item in bizCourseAttachments" :key="item.id">
					<div>{{ item.attachmentName }}</div>
					<div class='download' @click="downloadSource(item)">下载资料</div>
				</li>

			</ul>
		</div>
	</div>
	<Footer></Footer>
</template>

<script setup>
// element
import { ElMessage } from 'element-plus';

//引入组件
import Header from '@/components/common/Header.vue'
import Footer from '@/components/Home/Footer.vue'
//element
import { ArrowRight } from '@element-plus/icons-vue'

// 引入课程详情页请求
import { getDetail, checkAuth, downloadAttachment } from '@/utils/api/Course.js'
import { onBeforeMount } from 'vue';

//pinia
import { useUserStore } from '@/store/user'

import { addShopCar } from '@/utils/api/cart'

// 临时token
import { createToken } from '@/utils/api/createToken'

//路由
let router = useRouter();

//章节 和 下载笔记代码切换数据
let isActive = ref(1);

let route = useRoute();

// 接收课程页面的课程id
let CourseId = route.query.id;

// 课程详情数据
let detail = reactive({
	courseName: ''
})

// 课程章节
let bizCourseChapters = ref([]);

// 课程资料
let bizCourseAttachments = ref([]);


// 有data数据 的生命周期
onBeforeMount(() => {
	// 课程详情页请求
	getDetail({
		courseId: CourseId
	}).then(res => {
		console.log(res.data.data.data.id)
		let data = res.data.data.data
		detail.courseName = data.courseName;
		console.log(data)
		bizCourseChapters.value = data.bizCourseChapters
		bizCourseAttachments.value = data.bizCourseAttachments
		console.log(data.bizCourseAttachments)
	})


})

// 下载资料
const downloadSource = (item) => {

	console.log(item)

	// 获取存储在pinia中的 登录token
	if (!useUserStore().token) {
		ElMessage.info({
			message: '请先登录'
		});
		router.push('/login');
		return;
	}

	// 如果登录则 查看用户是否有权限（会员）
	checkAuth({
		// 课程id
		courseId: item.courseId,

	}).then(res => {
		// 如果hasAuth为false 就成立 提醒购买课程
		if (!res.data.data.data.hasAuth) {
			ElMessage.info({
				message: '请先购买该课程才可以下载资料'
			});
			return;
		}

		// 如果有权限则
		downloadAttachment({
			courseId: item.courseId,
			// 课程资料id
			attachmentId: item.id
		}).then(res => {
			const blob = new Blob([res]);
			console.log(blob);

			// 通过后端传递的名称 赋给下载资料对应的名称
			let fileName = item.attachmentName;
			console.log(fileName)
			let fileUrl = item.attachmentUrl;
			console.log(fileUrl)

			const extName = fileUrl.substring(
				fileUrl.lastIndexOf('.')
			)

			fileName = fileName + extName;
			console.log(fileName)


			// 创建a标签 以进入下载页
			const link = document.createElement('a');
			link.download = fileName;
			link.target = '_blank';
			// 隐藏a 不让破坏页面展示
			link.style.display = 'none';
			// 设置a链接地址
			link.href = URL.createObjectURL(blob);
			document.body.appendChild(link);
			link.click();
			URL.revokeObjectURL(link.href);
			document.body.removeChild(link);

		})

	})



}

// 开始学习
const goPlay = (item, chapterId) => {
	console.log(chapterId)
	//判断是否是登录状态，如果没有登录，进入登录页面
	if (!useUserStore().token) {
		ElMessage.info({
			message: '请先登录'
		});
		router.push('/login');
		return;
	}
	//如果是登录状态 发送权限请求
	checkAuth({
		courseId: item.courseId
	}).then(res => {
		// 如果没有权限，提醒购买
		if (!res.data.data.hasAuth) {
			ElMessage.info({
				message: '购买该课程才可以学习哦～'
			});
			return;
		}

	})

	//有权限 进入课程播放页
	router.push({
		path: '/course-play/' + item.courseId + '/' + chapterId,
	})
}

//  加入购物车
const addCart = () => {


	// 请求临时token
	createToken().then(res => {
		let token = res.data.data.token;
		// console.log(token)

		// 加入购物车请求
		addShopCar({
			courseId: CourseId,//首页点击的课程ID
			memberId: useUserStore().userInfo.id//会员ID
		}, token).then(res => {
			if (res.data.meta.code == '200') {

				router.push('/cart')

				ElMessage.success({
					message: '加入购物车成功！~'
				});


			} else {
				ElMessage.info({
					message: '添加失败~该课程已添加哦~'
				})
			}

		})

	})


}

</script>

<style scoped>
.detail-title {
	width: 100%;
	height: 183px;
	background: url('@/assets/img/detail-bg.png') no-repeat;
	background-size: 100% 100%;
}

.detail-main {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 1000px;
	margin: 0 auto;
	height: 100%;
}

::v-deep .el-breadcrumb__separator {
	color: #fff;
}

::v-deep .el-breadcrumb__inner {
	color: #fff;
}

::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
	color: #fff;
	font-weight: 500;
}

.detail-name {
	font-size: 27px;
	font-weight: 500;
	color: #FFFFFF;
}

.detail-content {
	font-size: 12px;
	font-weight: 400;
	color: #FFFFFF;
}

.tab-name {
	width: 100%;
	height: 57px;
	background: #FFFFFF;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1600);
}

.tab-name ul {
	display: flex;
	align-items: center;
	height: 57px;
	width: 1000px;
	margin: 0 auto;
	font-size: 16px;
	cursor: pointer;
}

.tab-name ul li+li {
	margin-left: 67px;
}

.tab-name ul li.active {
	position: relative;
	color: #388FFF;
	font-weight: bold;
}

.tab-name ul li.active:after {
	content: '';
	position: absolute;
	left: 50%;
	margin-left: -20%;
	bottom: -6px;
	width: 40%;
	height: 3px;
	background: #388FFF;
	border-radius: 1px;
}

.tab-chapters {
	width: 1000px;
	margin: 0 auto;
}

.tab-txt {
	margin: 29px 0;
	width: 100%;
	height: 147px;
	background: #FFFFFF;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.0900);
	border-radius: 5px;
}

.txt-content {
	padding: 24px 27px;
}

.txt-btn {
	display: flex;
	justify-content: flex-end;
}

.payment {
	margin-right: 13px;
	width: 99px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 12px;
	color: #FFFFFF;
	background: #F11D1D;
	border-radius: 15px;
	cursor: pointer;
}

.add-cart {
	margin-right: 33px;
	width: 99px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 12px;
	color: #F11D1D;
	background: #FDE7E7;
	border-radius: 15px;
	cursor: pointer;

}

.add-cart a {
	color: black;
	text-decoration: none;
}

.detail-list {
	margin-top: 30px;
}

.item {
	margin-bottom: 10px;
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.0900);
	border-radius: 5px;
}

.item-title {
	padding: 16px 27px;
}

.item-name {
	font-size: 16px;
	font-weight: bold;
	color: #333333;
}

.item-key {
	margin-top: 10px;
	font-size: 12px;
	font-weight: 400;
	color: #5C5C5C;
}

.item ul {}

.item ul li {
	display: flex;
	justify-content: space-between;
	padding: 16px 27px;
}

.item ul li .course {
	display: flex;
}

.course {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 400;
	color: #333333;
}

.course img {
	width: 13px;
	height: 11px;
	margin-right: 7px;
}

.course-video {
	width: 73px;
	height: 20px;
	text-align: center;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 20px;
	background: #388FFF;
	border-radius: 8px;
	cursor: pointer;
}

.tab-main {
	width: 1000px;
	margin: 0 auto;
}

.tab-main ul {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.tab-main ul li {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	margin: 10px 0;
	line-height: 35px;
	font-size: 14px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0px 3px 6px rgb(0 0 0 / 9%);
}

.download {
	width: 100px;
	border: none;
	border-radius: 8px;
	font-size: 12px;
	text-align: center;
	color: #fff;
	background-color: #007bff;
	cursor: pointer;
}
</style>
